<ion-view view-title="美图">
    <ion-nav-buttons side="left">
        <button class="button button-icon ion-navicon" menu-toggle></button>
    </ion-nav-buttons>
    <style>
        *{margin: 0;padding: 0;}
        .pic-card{height: 200px;}
        .pic-bg{width: 100%; height: 200px; background: rgba(0,0,0,0.4); position: relative; top:-1px}
        .pic-bg p{line-height: 200px; text-align: center; color: white; font-size: 3em}
        .beautifulPicContent{background: url("images/bg.jpg");}
    </style>
    <ion-content class="beautifulPicContent" on-scroll="changePicBg()">
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/002.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>动 漫</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/003.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>游戏</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/004.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>东方</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/005.jpeg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>偶像</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/006.jpeg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>元气</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/007.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>抒情</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/008.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>古风</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/009.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>初音</p></div>
        </div>
        <div class="card pic-card" ng-click="openModal()" style="background: url('images/010.jpg');background-size: cover;background-position: 0px -5px;">
            <div class="pic-bg"><p>自然</p></div>
        </div>
    </ion-content>
    <script id="beautifulPic-modal.html" type="text/ng-template">
        <!--需要将modal的内容放在一个ionModalView>元素内-->
        <ion-modal-view>
            <style>
                .lazy{background: url("images/lang.jpg"); background-size: cover;}
            </style>
            <ion-header-bar class="bar-dark">
                <button class="button button-clear" ng-click="closeModal()">返回</button>
                <h1 class="title">美图</h1>
            </ion-header-bar>
            <ion-content class="lazy">
            </ion-content>
        </ion-modal-view>
    </script>
</ion-view>